import { Col, Row, Steps , Form, Input, Select, Button,message,Card} from 'antd';
import React, { useState, useEffect } from 'react';   
import {useTranslation} from 'react-i18next'
import { createReport,editProduct,separatedFm,addFm,editFm,separatedFix,separatedCreateReport,subjectTestResult,updateSubjectTestResult,mixedfm,mixedFix,mixedCreateReport,getRmInciResult,saveSafetyRmInciResult,batchSaveRmInciResult,updateDataResult,uploadRemark,uploadRemarkUpdate,delRemark,refreshResult} from "@/api/modules/jhreport";
import FullscreenLoading from '@/components/FullscreenLoading';

const { TextArea } = Input;  
const RightContent = ({ rightContent, currentStep, setCurrentStep, stepNames ,upStep4}) => {  
  const [form] = Form.useForm();
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false); 
  const steps = stepNames.map((name, index) => (  
    <Steps.Step
      key={index}  
      subTitle={
        <span style={{  
          // 如果当前步骤，字体加粗且为黑色  
          fontWeight: index === currentStep ? 'bold' : 'normal',  
          color: index === currentStep ? 'black' : 'initial', // 你可以根据需要设置颜色  
          // 其他你想要的样式...  
        }} >
            {name}
        </span>
      } // 步骤的标题  
      status='wait'
      // 这里可以根据需要添加 subTitle 或 description  
      onClick={() => setCurrentStep(index)} 
      style={{  
        // 这里可以根据步骤的索引和当前步骤来自定义样式  
        // 例如，如果步骤是当前的，可以添加特殊的样式  
        // backgroundColor: index === currentStep ? '#f5f5f5' : 'initial', // 当前步骤背景色 
        // 其他你想要的样式...  
      }}  
    />  
  ));  

  useEffect(() => {  
    GetFormData()
  }, [form, rightContent]);  
  
const GetFormData = () => {
     // 如果需要，根据rightContent初始化表单值  
     rightContent.table.headerEnTs.CIR.map(i=>{
        if (i.visible) {  
            // 假设 item.name 是表单字段名，item.value 是初始值  
             rightContent[i.name] = rightContent.data[i.key]
          }  
    })
    rightContent.table.headerEnTs.Endpoints.map(i=>{
        if (i.visible) {  
            // 假设 item.name 是表单字段名，item.value 是初始值  
             rightContent[i.name] = rightContent.data[i.key]
          }  
    })
    rightContent.table.headerEnTs.IECIC.map(i=>{
        if (i.visible) {  
            // 假设 item.name 是表单字段名，item.value 是初始值  
             rightContent[i.name] = rightContent.data[i.key]
          }  
    })
    form.setFieldsValue(rightContent) 
    form.setFieldsValue({
      selectSubclassification:rightContent.data.selectSubclassification
    })
    
}

const isJsonString = (str) => {  
    try {  
        JSON.parse(str);  
        return true;  
    } catch (e) {  
        return false;  
    }  
}  

const changeArrToJson = () =>{
    if (!isJsonString(rightContent.reference)) {  
        rightContent.reference = JSON.stringify(rightContent.reference);  
    }  
    if (!isJsonString(rightContent.remark)) {  
        rightContent.remark = JSON.stringify(rightContent.remark);  
    }  
    if (!isJsonString(rightContent.riskSubstance)) {  
        rightContent.riskSubstance = JSON.stringify(rightContent.riskSubstance);  
    }  
    if (!isJsonString(rightContent.riskReference)) {  
        rightContent.riskReference = JSON.stringify(rightContent.riskReference);  
    }  
    if (!isJsonString(rightContent.riskRemark)) {  
        rightContent.riskRemark = JSON.stringify(rightContent.riskRemark);  
    }  
}


  // 保存按钮的点击事件处理器  
const handleSave = () => {  
    // 获取表单数据并处理保存逻辑  
    form.validateFields().then(values => {  
      // values 包含了表单中所有字段的值，你可以在这里处理保存逻辑  
      if(values.stscAnnex !==undefined){
        rightContent.stscAnnex = values.stscAnnex
      }
      if(values.stsc2015 !==undefined){
        rightContent.stsc2015 = values.stsc2015
      }
      if(values.remark !==undefined){
        rightContent.remark = values.remark
      }
      if(values.remark !==undefined){
        rightContent.reference = values.reference
      }
      if(values.riskSubstance !==undefined){
        rightContent.riskSubstance = values.riskSubstance
      }
      if(values.riskReference !==undefined){
        rightContent.riskReference = values.riskReference
      }
      if(values.riskRemark !==undefined){
        rightContent.riskRemark = values.riskRemark
      }
      if(values.riskConclusion !==undefined){
        rightContent.riskConclusion = values.riskConclusion
      }
      if(values.finalConclusion !==undefined){
        rightContent.finalConclusion = values.finalConclusion
      }
      if(values.subjectConclusion !==undefined){
        rightContent.subjectConclusion = values.subjectConclusion
      }
      if(values.cirConclusion !==undefined){
        rightContent.cirConclusion = values.cirConclusion
      }
      changeArrToJson()
      console.log(values.reference,'reference')
      saveSafetyRmInciResult(rightContent).then(res=>{
        message.success('Success')
        upStep4(res.data.data,'success')
        let data = res.data.data
        data.reference=JSON.parse(data.reference)
        data.remark=JSON.parse(data.remark)
        data.riskSubstance=JSON.parse(data.riskSubstance)
        data.riskReference=JSON.parse(data.riskReference)
        data.riskRemark=JSON.parse(data.riskRemark)
        rightContent=data
        console.log(data,'保存后的data')
        form.setFieldsValue(data)
        setLoading(false) 
      })
      // 发送请求到后端保存数据等  
    }).catch(errorInfo => {  
      // 表单验证失败的回调处理  
      console.log('Failed:', errorInfo);  
      setLoading(false) 
    });  
  };  

const changeAnnex = () =>{
    let desc = ""
    let str3 =""
    let law_incigroup_serial=""
    let data = form.getFieldsValue()
    console.log(data,'data')
    console.log(rightContent,'right')
    rightContent.zyLawIncigroups.map(i=>{
        if(i.annexDetailDesc==data.stscAnnex){
            law_incigroup_serial=i.serial
            if(i.productTypeBodyPart !=null){
                desc+=("适用及(或)使用范围为：" + i.productTypeBodyPart + "；");
            }
            if (i.maxConcentration != null) {
                desc+=("化妆品使用时的最大允许浓度为：" + i.maxConcentration + "；");
            }
            if (i.other != null) {
                desc+=("其他限制和要求为：" + i.other  + "；");
            }
            if (i.wordConditionUseWarning!= null) {
                desc+=("标签上必须标印的使用条件和注意事项为：" + i.wordConditionUseWarning + "；");
            }
            if ("准用着色剂"==(i.annex.toString())) {
                if (i.color != null) {
                    desc+=("颜色为：" + i.color + "；");
                }
                if (i.ciGenericNameCn!= null) {
                    desc+=("着色剂索引通用中文名为：" + i.ciGenericNameCn + "；");
                }
            }
            str3=i.annexDetailDesc
        }
    })
    rightContent.stsc2015="符合《化妆品安全技术规范》" + str3.substring(str3.indexOf("【") + 1, str3.indexOf("】")) + "；序号为：" + law_incigroup_serial + "；" + desc;
    rightContent.stsc= "符合《化妆品安全技术规范》" + str3.substring(str3.indexOf("【") + 1, str3.indexOf("】")) + "；序号为："+ law_incigroup_serial;
    form.setFieldsValue({stsc2015:"符合《化妆品安全技术规范》" + str3.substring(str3.indexOf("【") + 1, str3.indexOf("】")) + "；序号为：" + law_incigroup_serial + "；" + desc})
    form.setFieldsValue({stsc:"符合《化妆品安全技术规范》" + str3.substring(str3.indexOf("【") + 1, str3.indexOf("】")) + "；序号为："+ law_incigroup_serial})
}
  
// 点击事件处理函数  
const handleSaveRefresh = (type) => {
    // 在这里编写你的逻辑，比如发送请求、更新状态等 
    const data1 = form.getFieldsValue()
    setLoading(true) 
    console.log(data1,'form')
    if (type === '1') {  
        rightContent.table.headerEnTs.CIR.forEach(i => {  
            // 使用 Object.prototype.hasOwnProperty.call 来检查属性是否存在  
            if (Object.prototype.hasOwnProperty.call(data1, i.name)) {  
                // 如果存在，更新 rightContent.data[i.key] 的值为 data1 中对应的值  
                if (rightContent.data && i.key) {  
                    rightContent.data[i.key] = data1[i.name];  
                }  
            }  
        });  
    }
    if( type === '1-2'){
      const dataForm = form.getFieldsValue()
      rightContent.data.selectSubclassification = dataForm.selectSubclassification
    }
    if (type === '2') {  
        rightContent.table.headerEnTs.Endpoints.forEach(i => {  
            // 使用 Object.prototype.hasOwnProperty.call 来检查属性是否存在  
            if (Object.prototype.hasOwnProperty.call(data1, i.name)) {  
                // 如果存在，更新 rightContent.data[i.key] 的值为 data1 中对应的值  
                if (rightContent.data && i.key) {  
                    rightContent.data[i.key] = data1[i.name];  
                }  
            }  
        });  
    }
    if (type === '3') {  
       rightContent.max3Leaveon = data1.max3Leaveon
       rightContent.max3Rinseoff = data1.max3Rinseoff
    }
    if (type === '4') {  
        rightContent.table.headerEnTs.IECIC.forEach(i => {  
            // 使用 Object.prototype.hasOwnProperty.call 来检查属性是否存在  
            if (Object.prototype.hasOwnProperty.call(data1, i.name)) {  
                // 如果存在，更新 rightContent.data[i.key] 的值为 data1 中对应的值  
                if (rightContent.data && i.key) {  
                    rightContent.data[i.key] = data1[i.name];  
                }  
            }  
        });  
    }
    changeArrToJson()
    console.log(rightContent,'rightContent')
    updateDataResult(rightContent).then(res=>{
        let data = res.data.data
        data.reference=JSON.parse(data.reference)
        data.remark=JSON.parse(data.remark)
        data.riskSubstance=JSON.parse(data.riskSubstance)
        data.riskReference=JSON.parse(data.riskReference)
        data.riskRemark=JSON.parse(data.riskRemark)
        rightContent=data
        GetFormData()
        setTimeout(() => {
          handleSave()
        }, 1000);
    })
  }; 

  // 根据当前步骤动态生成下方的文本内容  
  const renderStepContent  = () => { 
    switch (currentStep) {  
      case 0:  
      return (  
        <div>  
            <Form.Item name="stscAnnex" label={t('report.STSC2015')}>  
            <Select  style={{ minWidth: '700px' }}   onChange={changeAnnex}>  
                {rightContent.zyLawIncigroups && rightContent.zyLawIncigroups.length > 0 && rightContent.zyLawIncigroups.map((item, index) => (  
                    <Select.Option key={index} value={item.annexDetailDesc}>{item.annexDetailDesc}</Select.Option>  
                ))}  
                {!rightContent.zyLawIncigroups || rightContent.zyLawIncigroups.length === 0 && (  
                    <Select.Option disabled value="">No options available</Select.Option>  
                )}  
            </Select> 
            </Form.Item>  
            <Form.Item style={{ minWidth: '700px' }} name="stsc2015"  label={t('report.STSCWording')}>  
              <TextArea>    
              </TextArea>  
            </Form.Item> 
            {/* 根据条件渲染不同的内容 */}  
      {rightContent.stsc2015 === '/' ||  
        rightContent.stsc2015 === null ||  
        rightContent.stsc2015 === '' ||  
        rightContent.stsc2015 === undefined ? (  
        <span />
      ) : (  
        <>  
          {/* 当条件为假时，渲染表单项 */}  
          <Form.Item name="reference" label={t('ing.citation')}>  
            <Select  
              mode="tags"  
              style={{ minWidth: '700px' }} 
              showSearch  
            >  
              {/* 这里可以添加默认的Option项 */}  
            </Select>  
          </Form.Item>  
          <Form.Item name="remark" label={t('rmrisk.comment')}>  
            <Select  
              mode="tags"  
              style={{ minWidth: '700px' }} 
              showSearch  
            >  
              {/* 这里可以添加默认的Option项 */}  
            </Select>  
          </Form.Item>  
        </>  
      )}   
        </div>  
      );   
      case 1:  
      return (  
        <div>  
            <Card   
                title={<div style={{backgroundColor:'rgb(238, 238, 238)'}}>CIR</div>}
                className="box-card"  
                style={{ marginBottom: 24, minWidth: '700px' }}  
                extra={  
                    <Button type="primary" danger onClick={() => handleSaveRefresh('1')}>  
                    {t('SaveRefresh')}  
                    </Button>  
                }  
                > 
                <Row>   
                    {rightContent.table.headerEnTs.CIR.map((item, index) => {
                        if (!item.visible) {  
                            // 如果 item.visible 为 false，则不渲染该控件  
                            return null;  
                          }
                          
                            return (  
                            <Col key={index} span={24}>  
                                <Form.Item name={item.name} label={item.name}>  
                                <Input />  
                                </Form.Item>  
                            </Col>  
                            );  
                        })} 
                    </Row>
                </Card>  
                <Card   
                title={<div style={{backgroundColor:'rgb(238, 238, 238)'}}>CIR VSRP</div>}
                className="box-card"  
                style={{ marginBottom: 24, minWidth: '700px' }}  
                extra={  
                    <Button type="primary" danger onClick={() => handleSaveRefresh('1-2')}>  
                    {t('SaveRefresh')}  
                    </Button>  
                }  
                > 
                <Row>   
                    {rightContent.table.headerEnTs['CIRVCRP'].map((item, index) => {
                        if (!item.visible) {  
                            // 如果 item.visible 为 false，则不渲染该控件  
                            return null;  
                          }
                          
                            return (  
                            <Col key={index} span={24}>  
                                <Form.Item name='selectSubclassification' label={item.name}>  
                                {rightContent.data.subclassificationList && rightContent.data.subclassificationList.length > 0 ? (  
                                    <Select allowClear>  
                                      {rightContent.data.subclassificationList.map(subItem => (  
                                        <Select.Option key={subItem.value} value={subItem.value}>  
                                          {subItem.value}  
                                        </Select.Option>  
                                      ))}  
                                    </Select>  
                                  ) : (  
                                    // 这里可以渲染一个占位符或者什么都不渲染  
                                   <Select></Select> 
                                  )}  
                                </Form.Item>  
                            </Col>  
                            );  
                        })} 
                    </Row>
                </Card>  
            <Form.Item style={{ minWidth: '700px' }} name="cirConclusion"  label={t('CIRConculusion')}>  
              <TextArea>    
              </TextArea>  
            </Form.Item> 
                 {/* 根据条件渲染不同的内容 */}  
      {rightContent.cirConclusion === '/' ||  
        rightContent.cirConclusion === null ||  
        rightContent.cirConclusion === '' ||  
        rightContent.cirConclusion === undefined ? (  
        <span />
      ) : (  
        <>  
          {/* 当条件为假时，渲染表单项 */}  
          <Form.Item name="reference" label={t('ing.citation')}>  
            <Select  
              mode="tags"  
              style={{ minWidth: '700px' }} 
              showSearch  
            >  
              {/* 这里可以添加默认的Option项 */}  
            </Select>  
          </Form.Item>  
          <Form.Item name="remark" label={t('rmrisk.comment')}>  
            <Select  
              mode="tags"  
              style={{ minWidth: '700px' }} 
              showSearch  
            >  
              {/* 这里可以添加默认的Option项 */}  
            </Select>  
          </Form.Item>  
        </>  
      )}
        </div>  
      );   
      case 2:
        return (  
            <div>  
                <Card  
                    title={<div style={{backgroundColor:'rgb(238, 238, 238)'}}>End Point</div>}
                    className="box-card"  
                    style={{ marginBottom: 24, minWidth: '700px' }} 
                    extra={  
                        <Button type="primary" danger onClick={() => handleSaveRefresh('2')}>  
                        {t('SaveRefresh')}  
                        </Button>  
                    }  
                    > 
                    <Row>   
                        {rightContent.table.headerEnTs.Endpoints.map((item, index) => {
                            if (!item.visible) {  
                                // 如果 item.visible 为 false，则不渲染该控件  
                                return null;  
                              }
                              
                                return (  
                                <Col key={index} span={24}>  
                                    <Form.Item name={item.name} label={item.name}>  
                                    <Input />  
                                    </Form.Item>  
                                </Col>  
                                );  
                            })} 
                        </Row>
                    </Card>  
                <Form.Item style={{ minWidth: '700px' }} name="subjectConclusion"  label={t('ToxicologyEndpointsConculusion')}>  
                  <TextArea>    
                  </TextArea>  
                </Form.Item> 
                {/* 根据条件渲染不同的内容 */}  
                {rightContent.subjectConclusion === '/' ||  
                rightContent.subjectConclusion === null ||  
                rightContent.subjectConclusion === '' ||  
                rightContent.subjectConclusion === undefined ? (  
                <span />
            ) : (  
                <>  
                {/* 当条件为假时，渲染表单项 */}  
                <Form.Item name="reference" label={t('ing.citation')}>  
                    <Select  
                    mode="multiple"  
                    style={{ minWidth: '700px' }} 
                    showSearch  
                    >  
                    {/* 这里可以添加默认的Option项 */}  
                    </Select>  
                </Form.Item>  
                <Form.Item name="remark" label={t('rmrisk.comment')}>  
                    <Select  
                    mode="multiple"  
                    style={{ minWidth: '700px' }} 
                    showSearch  
                    >  
                    {/* 这里可以添加默认的Option项 */}  
                    </Select>  
                </Form.Item>  
                </>  
            )}
            </div>  
          ); 
          case 3:
            return (  
                <div>  
                    <Card  
                        title={<div style={{backgroundColor:'rgb(238, 238, 238)'}}>Max 3 Year Concentration</div>}
                        className="box-card"  
                        style={{ marginBottom: 24, minWidth: '700px' }}  
                        extra={  
                            <Button type="primary" danger onClick={() => handleSaveRefresh('3')}>  
                            {t('SaveRefresh')}  
                            </Button>  
                        }  
                        > 
                        <Row>   
                            <Col  span={24}>  
                                <Form.Item name="max3Leaveon"  label={t('ing.max3yearLeaveon')}>  
                                    <Input>    
                                    </Input>  
                                </Form.Item> 
                            </Col>  
                            <Col  span={24}>  
                                <Form.Item name="max3Rinseoff"  label={t('ing.max3yearRinseoff')}>  
                                    <Input>    
                                    </Input>  
                                </Form.Item> 
                            </Col> 
                        </Row>
                        </Card>  
                  
                    {/* 根据条件渲染不同的内容 */}  
                </div>  
              );  
              case 4:
                return (  
                    <div>  
                        <Card  
                            title={<div style={{backgroundColor:'rgb(238, 238, 238)'}}>IECIC</div>}
                            className="box-card"  
                            style={{ marginBottom: 24, minWidth: '700px' }}  
                            extra={  
                                <Button type="primary" danger onClick={() => handleSaveRefresh('4')}>  
                                {t('SaveRefresh')}  
                                </Button>  
                            }  
                            > 
                            <Row>   
                                {rightContent.table.headerEnTs.IECIC.map((item, index) => {
                                    if (!item.visible) {  
                                        // 如果 item.visible 为 false，则不渲染该控件  
                                        return null;  
                                      }
                                        return (  
                                        <Col key={index} span={24}>  
                                            <Form.Item style={{ minWidth: '700px' }} name={item.name} label={item.name}>  
                                            <Input />  
                                            </Form.Item>  
                                        </Col>  
                                        );  
                                    })} 
                                </Row>
                            </Card>  
                        {/* 根据条件渲染不同的内容 */}  
                    </div>  
                  ); 
      case 5:
        return (  
            <div>  
                <Form.Item name="finalConclusion"  label={t('finalConculusion')}>  
                        <TextArea style={{ minWidth: '700px' }}>    
                    </TextArea>   
                </Form.Item> 
            </div>  
          ); 
      case 6:
        return (  
            <div>  
                <Form.Item name="riskSubstance"  label={t('risk')}>  
                    <Select  
                    mode="tags"
                    style={{ minWidth: '700px' }} 
                    showSearch  
                    >  
                    {/* 这里可以添加默认的Option项 */}  
                    </Select> 
                </Form.Item> 
                <Form.Item name="riskConclusion"  label={t('inci.diagnosticCn')}>  
                    <Input.TextArea style={{ minWidth: '700px' }}/> 
                </Form.Item> 
                <Form.Item name="riskReference"  label={t('ing.citation')}>  
                    <Select  
                    mode="tags"
                    style={{ minWidth: '700px' }} 
                    showSearch  
                    >  
                    {/* 这里可以添加默认的Option项 */}  
                    </Select> 
                </Form.Item> 
                <Form.Item name="riskRemark"  label={t('rmrisk.comment')}>  
                    <Select  
                    mode="tags"  
                    style={{ minWidth: '700px' }} 
                    showSearch  
                    >  
                    {/* 这里可以添加默认的Option项 */}  
                    </Select> 
                </Form.Item> 
                {/* 根据条件渲染不同的内容 */}  
             
            </div>  
          ); 
      // ... 其他步骤的内容  
      default:  
        return <h2>默认步骤内容</h2>;  
    }  
  };  
  
  return (  
    <Col span={20} style={{marginTop:'2%'}}>  
       <Row gutter={[16, 16]}>  
      <Col span={10}>  
      <FullscreenLoading showLoading={loading} loadingTip="Loading..."/> 
        <div>  
          <div>{rightContent.inciCN}</div>  
          <div>{rightContent.inciEN}</div>  
          <div></div>  
        </div>  
    </Col>
    <Col span={7}>
        <div>  
          <div>序号: <span style={{color:'red'}}>{rightContent.serial}</span></div>  
          <div>百分比: <span style={{color:'red'}}>{rightContent.data[2]}%</span></div>  
          <div></div>  
        </div>  
    </Col>
    <Col span={7}>
        <div>  
          <div>法规校验: <span style={{color:'red'}}>{rightContent.data[6]}</span></div>  
          <div>Ingredient核验: <span style={{color:'red'}}>{rightContent.data[7]}</span></div>  
          <div>发现: <span style={{color:'red'}}>{rightContent.finding}</span></div>  
        </div>  
      </Col>
    </Row>  
      <Row>  
      <Col span={20} style={{marginTop:'2%'}}>  
          {/* 步骤条，现在设置 labelPlacement="vertical" 并添加 onChange 事件处理器 */}  
          <Steps  
            current={currentStep}  
            onChange={setCurrentStep} // 直接将 setCurrentStep 作为 onChange 的处理函数  
            labelPlacement="vertical" // 设置步骤标签垂直显示  
          >  
            {steps}  
          </Steps>  
  
          {/* 当前步骤的内容 */}  
          <Form form={form} layout="vertical">  
            {renderStepContent()}  
            <Form.Item>  
                <Button type="primary" size='small' danger onClick={handleSave}>保存</Button>  
            </Form.Item>  
            </Form>  
        </Col>  
      </Row>  
    </Col>  
  );  
};  
  
export default RightContent;